<template>
  <div class="main">
    <a-form name="basic" id="formLogin" class="user-layout-login" ref="formLogin" :model="form"
            @submit="handleSubmit" @finish="onFinish">
      <a-tabs :activeKey="customActiveKey"
              :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
              @change="handleTabClick">
        <a-tab-pane key="username_password_login" :tab="t('user.login.tab-login-credentials')">
          <a-form-item :rules="[{required: true, message: t('user.login.username.required')}]">
            <a-input size="large" type="text" :placeholder="t('user.login.username.placeholder')"
                     v-model:value="form.username">
              <template v-slot:prefix>
                <UserOutlined :style="{ color: 'rgba(0,0,0,.25)' }" />
              </template>
            </a-input>
          </a-form-item>

          <a-form-item :rules="[{required: true, message: t('user.login.password.required')}]">
            <a-input-password size="large" autocomplete="off"
                              :placeholder="t('user.login.password.placeholder')"
                              v-model:value="form.password">
              <template #prefix>
                <LockOutlined :style="{ color: 'rgba(0,0,0,.25)' }" />
              </template>
            </a-input-password>
          </a-form-item>
        </a-tab-pane>
        <a-tab-pane key="phone_code_login" :tab="t('user.login.tab-login-mobile')">
          <a-form-item
            :rules="[{required: true, pattern: /^1[34578]\d{9}$/, message: t('user.login.mobile.required') }]">
            <a-input size="large" type="text" :placeholder="t('user.login.mobile.placeholder')"
                     v-model:value="form.mobile">
              <template v-slot:prefix>
                <MobileOutlined :style="{color: 'rgba(0,0,0,.25)'}" />
              </template>
            </a-input>
          </a-form-item>

          <a-row :gutter="16">
            <a-col class="gutter-row" :span="16">
              <a-form-item
                :rules="[{required: true, message: t('user.login.verification-code.required') }]">
                <a-input size="large" type="text"
                         :placeholder="t('user.login.mobile.verification-code.placeholder')"
                         v-model:value="form.captcha">
                  <template v-slot:prefix>
                    <LockOutlined :style="{ color: 'rgba(0,0,0,.25)' }" />
                  </template>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="8">
              <a-button class="getCaptcha" tabindex="-1" :disabled="state.smsSendBtn"
                        @click.stop.prevent="getCaptcha"
                        v-text="!state.smsSendBtn && t('user.register.get-verification-code') || (state.times + ' s')"></a-button>
            </a-col>
          </a-row>
        </a-tab-pane>
      </a-tabs>

      <a-flex justify="space-between" align="flex-start" style="margin-top: 24px;">
        <a-form-item>
          <a-checkbox v-model:checked="form.rememberMe">{{ t('user.login.remember-me') }}
          </a-checkbox>
        </a-form-item>
        <a-form-item>
          <router-link :to="{ path: '/recover', query: { user: 'aaa' } }" class="forge-password"
                       style="float: right;">{{
              t('user.login.forgot-password') }}
          </router-link>
        </a-form-item>

      </a-flex>

      <a-form-item>
        <a-button size="large" type="primary" htmlType="submit" class="login-button"
                  :loading="state.loginBtn"
                  :disabled="state.loginBtn">{{ t('user.login.login') }}
        </a-button>
      </a-form-item>

      <div class="user-login-other">
        <span>{{ t('user.login.sign-in-with') }}</span>
        <a>
          <Icon class="item-icon item-icon-hover-feishu">
            <template #component>
              <svg t="1749381782279" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="5712" width="1em" height="1em">
                <path
                  d="M243.413333 186.538667h372.010667s130.944 144.64 103.978667 264.106666-182.485333 77.568-182.485334 77.568-156.373333-241.066667-295.722666-335.488a3.370667 3.370667 0 0 1 2.261333-6.186666z"
                  p-id="5713"></path>
                <path
                  d="M350.762667 650.709333a3.370667 3.370667 0 0 1 0-6.741333 505.770667 505.770667 0 0 0 218.581333-147.328 317.482667 317.482667 0 0 1 229.290667-119.04 305.152 305.152 0 0 1 118.016 25.856 2.816 2.816 0 0 1 0 4.48 542.848 542.848 0 0 0-72.533334 121.941333 561.962667 561.962667 0 0 1-56.192 107.904 327.04 327.04 0 0 1-39.893333 47.786667l-69.674667 56.192z"
                  p-id="5714"></path>
                <path
                  d="M106.282667 389.973333a5.077333 5.077333 0 0 1 8.533333-4.48c52.266667 49.450667 331.008 299.52 572.629333 289.408a155.093333 155.093333 0 0 0 107.904-56.192c48.341333-56.192-92.714667 186.026667-319.744 214.101334a528.256 528.256 0 0 1-350.677333-75.861334 42.666667 42.666667 0 0 1-18.56-35.413333z"
                  p-id="5715"></path>
              </svg>
            </template>
          </Icon>
        </a>
        <a>
          <DingtalkOutlined class="item-icon item-icon-hover-dingding" />
        </a>
        <a>
          <WechatOutlined class="item-icon item-icon-hover-weixin" />
        </a>
      </div>
    </a-form>


  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import Icon from '@ant-design/icons-vue'
import {
  DingtalkOutlined,
  WechatOutlined,
  MobileOutlined,
  UserOutlined,
  LockOutlined
} from '@ant-design/icons-vue'
import type { UserPassLoginParam } from '@/api/user/types'
import { notification } from 'ant-design-vue'
import { useUserStore } from '@/stores/user'

const form = reactive({
  username: '',
  password: '',
  mobile: '',
  captcha: '',
  rememberMe: false
})

const router = useRouter()

const { t } = useI18n()


const state = reactive({
  loginBtn: false,
  smsSendBtn: false,
  times: 0
})
const customActiveKey = ref('username_password_login')

const handleTabClick = (key: string) => {
  customActiveKey.value = key
}
const getCaptcha = async () => {
  state.smsSendBtn = true
  setTimeout(() => {
    state.smsSendBtn = false
  }, 1000)
}

const handleSubmit = async () => {

  const { username, password, rememberMe } = form
  // const data = { username, password, mobile, captcha, rememberMe }
  const data: UserPassLoginParam = { username, password: password, remember: rememberMe }

  state.loginBtn = true

  try {
    const res = await useUserStore().login(data)
    console.log('store login success', res)

    if (res.code === 200) {
      router.push({ path: '/' })
    } else {
      notification.error({
        message: res?.message || t('user.login.message-invalid-credentials')
      })
    }
    state.loginBtn = false
  } catch (error: any) {
    state.loginBtn = false

    notification.error({
      message: t('user.login.message-invalid-credentials'),
      description: error.message
    })
  }

}
const onFinish = (status: never) => {
  console.log(status)
}
</script>

<style lang="less" scoped>
.user-layout-login {
  label {
    font-size: 14px;
  }

  .getCaptcha {
    display: block;
    width: 100%;
    height: 40px;
  }

  .forge-password {
    font-size: 14px;
  }

  button.login-button {
    padding: 0 15px;
    font-size: 16px;
    height: 40px;
    width: 100%;
  }

  .user-login-other {
    text-align: left;
    margin-top: 24px;
    line-height: 22px;

    .item-icon {
      font-size: 24px;
      color: rgba(0, 0, 0, 0.2);
      margin-left: 16px;
      vertical-align: middle;
      cursor: pointer;
      transition: color 0.3s;

      &:hover {
        color: #00c300;
      }

      &-hover-dingding {
        &:hover {
          color: #02A4FFFF;
        }
      }

      &-hover-weixin {
        &:hover {
          color: #00c300;
        }
      }

      &-hover-feishu {
        .icon {
          path {
            fill: #C0C2C4FF;
          }
        }

        &:hover {
          .icon {
            path {
              &:first-child {
                fill: #01D7BB;
              }

              &:nth-child(2) {
                fill: #0C39A0;
              }

              &:nth-child(3) {
                fill: #326EFF;
              }
            }
          }
        }
      }
    }

    .register {
      float: right;
    }
  }
}
</style>
